<script lang="ts">
    import EditorJS from "@editorjs/editorjs";
    import RichEditor from "$lib/components/editor/RichEditor.svelte";
    import { Send } from "lucide-svelte";
    import { request } from "$lib/utils/request";
    import { send as send_msg } from "$lib/api/board/board_chat";
    import { userStore } from "$lib/stores/user.svelte";
    import { boardStore } from "$lib/stores/board.svelte";
    import { chatStore } from "./store.svelte";
    import ChatMsg from "./ChatMsg.svelte";
    import { listen } from "@tauri-apps/api/event";
    import type { AllNotice } from "$lib/api/notice_type";
    import type { Action } from "svelte/action";

    let chatEditor = $state(null as null | EditorJS);
    let canSend = $state(false);

    async function sendMsg() {
        if (chatEditor == null) {
            return;
        }
        const content = await chatEditor.save();
        await request(
            send_msg({
                session_id: userStore.userSession,
                board_id: boardStore.curBoardId,
                draw_id: "",
                content: JSON.stringify(content),
            }),
        );
        chatEditor.clear();
    }

    const scrollAction: Action = (node) => {
        node.onscroll = () => {
            chatStore.autoScroll =
                node.clientHeight + node.scrollTop + 20 >= node.scrollHeight;
            if (node.scrollTop < 10) {
                chatStore.listMsgBefore();
            } else if (
                node.clientHeight + node.scrollTop + 10 >=
                node.scrollHeight
            ) {
                chatStore.listMsgAfter();
            }
        };
    };

    $effect(() => {
        chatStore.init(boardStore.curBoardId);
    });

    $effect(() => {
        const unListen = listen<AllNotice>("notice", (ev) => {
            const payload = ev.payload;
            if (payload.BoardNotice != undefined) {
                chatStore.processBoardNotice(payload.BoardNotice);
            }
        });
        return () => {
            unListen.then((fn) => fn());
        };
    });
</script>

<main class="flex flex-col h-[calc(100vh-110px)] overflow-hidden p-1">
    <div class="flex-1 overflow-y-auto" use:scrollAction>
        {#each chatStore.msgList as msg}
            <ChatMsg {msg} />
        {/each}
    </div>
    <div class="border-t-1 border-surface-200-800 mt-1">
        <RichEditor
            placeholder="请输入..."
            onInit={(tmpEditor) => (chatEditor = tmpEditor)}
            onChange={() => {
                if (chatEditor != null) {
                    chatEditor.save().then((content) => {
                        canSend = content.blocks.length > 0;
                    });
                }
            }}
            sizeClass="min-h-[200px] max-h-[400px]"
        />
        <button
            type="button"
            class="fixed right-[240px] bottom-[20px] btn preset-filled-primary-500 z-50"
            disabled={!canSend}
            onclick={() => sendMsg()}
        >
            <Send />
        </button>
    </div>
</main>
